<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function jisuan(valu){
				var num = document.getElementById("d");
				try{
					switch (valu){
					case "←":
						num.value = num.value.substring("",num.value.length-1);
						break;
					case "=":
						num.value=eval(num.value);
						if(num.value=="Infinity"){
							num.value="逗我呢？？？？？";
						}
						if(num.value=="undefined"){
							num.value="";
						}
						break;
					case "C":
						num.value="";
						break;
					default:
						num.value=num.value+valu;
						break;
					}
				}catch(e){
					//TODO handle the exception
					alert("滚蛋！！！！！");
				}
				
			}
		</script>
		<style type="text/css">
			input[type="text"]{
				height: 40px;
				width: 200px;
				border-radius: 5px;
				margin-top: 20px;
				font-size: 20px;
				
			}
			input[type="button"]{
				margin:0px 10px;
				border-radius: 5px;
				background-color: white;
				width: 45px;
				height: 45px;
				font-size: 20px;
				transition: all 0.5s ease-in-out;
			}
			input[type="button"]:hover{
				background-color: greenyellow;
				transition: all 0.5s ease;
			}
			input[type="button"]:active{
				background-color: cadetblue;
			}
			
			.dd{
				width: 360px;
				height: 350px;
				background-color: #00FFFF;
				border-radius: 15px;
				margin: 30px auto 0px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
			}
			.dd input[type="text"]:first-child{
				width: 300px;
			}
			.dd_l{
				width: 200px;
				height: 250px;
				margin-left: 5px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
			}
			.dd_y{
				width: 70px;
				height: 250px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
			}
			.dd_y input{
				color: red;
				font-size: 28px;
			}
			
			.dd_r{
				width: 80px;
				height: 250px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
			}
			.dd_r input:last-of-type{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="dd">
			<input type="text" name="d" id="d" value="" /><br>
			<div class="dd_l">
				<input type="button" name="" id="" value="1" onclick="jisuan(this.value)"/>
				<input type="button" name="" id="" value="2" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="3" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="4" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="5" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="6" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="7" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="8" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="9" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="." onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="0" onclick="jisuan(this.value)" />
			</div>
			
			
			<div class="dd_y">
				<input type="button" name="" id="" value="+" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="-" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="*" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="/" onclick="jisuan(this.value)"  />
			</div>
			<div class="dd_r">
				<input type="button" name="" id="" value="←" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="%" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="C" onclick="jisuan(this.value)" />
				<input type="button" name="" id="" value="=" onclick="jisuan(this.value)" />
			</div>
		</div>
		
	</body>
</html>
